import React, { Component, useState, useEffect } from "react";
import { Image, View } from "@tarojs/components";
// import { AtAvatar, AtButton, AtDivider, AtTabs, AtTabsPane } from "taro-ui";
import Taro from "@tarojs/taro";
import NavBar from "../fit";
// import left from "../image/left.png";
import "./collection.scss";

const Collection = props => {
  const handleClick = () => {};

  const [res, setRes] = useState([]);

  useEffect(() => {
    const openid = Taro.getStorageSync("openid");
    Taro.cloud
      .callFunction({
        // 要调用的云函数名称
        name: "collection",
        // 传递给云函数的event参数
        data: {
          $url: "find_collection",
          openid
        }
      })
      .then(res => {
        console.log(res.result.data.data);
        setRes(res.result.data.data);
        // output: res.result === 3
      })
      .catch(err => {
        console.log(err);
        // handle error
      });
  }, [props]);

  const List1 = res.map(content => (
    <View className="list">
      <View className="listlist">
        <View className="title">{content.title}</View>
        {/*<View className="name">*/}
        {/*  <AtAvatar circle*/}
        {/*            size="small"*/}
        {/*            image={content.imgsrc}*/}
        {/*  />*/}
        {/*  <View className="name1">{content.name}</View>*/}
        {/*</View>*/}
        <View className="content">{content.content}</View>
        <Image className="pic-style" src={content.picture} />
      </View>
    </View>
  ));

  const toBack = () => {
    Taro.navigateBack().then();
  };

  return (
    <View className="box">
      <View className="aa">
        <NavBar title=" " back={true} />
        <View className="box2">营养文章</View>
      </View>
      <View className="box3">{List1}</View>
    </View>
  );
};
export default Collection;
